<template>
    <el-drawer :title="title" :visible.sync="visible" close-on-press-escape direction="btt" size="80%">
        <el-tabs v-model="activeName" type="card" @tab-click="tabHandle">
            <el-tab-pane label="元数据" name="first" v-if="isAuth()">
                <matedata-tab ref="matedata" v-if="matedataVisible"></matedata-tab>
            </el-tab-pane>
        </el-tabs>
    </el-drawer>
</template>
<script>
    // 元数据字段
    import MatedataTab from './manage-tab/matedata-tab'
    export default {
        data() {
            return {
                title: '元数据字段',
                visible: false,
                matedataVisible: false,
                matedataForm: {
                    pkTable: ''
                },
                gridData: [],
                activeName: 'first',
            }
        },
        components: {
            MatedataTab
        },
        methods: {
            init(id) {
                this.visible = true
                this.matedataForm.pkTable = id
                this.matedataVisible = true
                this.activeName = 'first'
                this.$nextTick(() => {
                    // 初始加载授权用户
                    this.$refs.matedata.init(this.matedataForm.pkTable);
                })
            },

            // 切换页签
            tabHandle(tab, event) {
                if (tab.index == '0') {
                    this.matedataVisible = true
                    this.$nextTick(() => {
                        this.$refs.matedata.init(this.matedataForm.pkTable);
                    })
                }
            },


        }
    }
</script>
<style scoped>
    .drawer-header {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        height: 36px;
        line-height: 36px;
    }
</style>